// 用工结构
import { useRef, useEffect } from "react"
import * as am4charts from "@amcharts/amcharts4/charts"
import * as am4core from "@amcharts/amcharts4/core"

const EmploymentStructure = ({ data = {}, dataDetails = {} }) => {
  const chartRef = useRef(null)
  const myChart = useRef(null)

  const createChart = (ref, myChart, data = []) => {
    if (myChart.current) return
    const chart = am4core.create(ref.current, am4charts.PieChart3D)
    chart.hiddenState.properties.opacity = 0 // this creates initial fade-in
    chart.width = am4core.percent(100)

    chart.data = data
    chart.angle = 60
    chart.depth = 10
    chart.fontSize = 12
    chart.tooltip.label.fontSize = 12
    chart.logo.disabled = true

    const series = chart.series.push(new am4charts.PieSeries3D())
    series.dataFields.value = "value"
    series.dataFields.category = "name"
    // 获取颜色
    series.colors.list = data.map((item) => am4core.color(item.color))

    series.ticks.template.stroke = am4core.color("#000000")
    series.ticks.template.strokeOpacity = 0.8
    chart.innerRadius = am4core.percent(40)

    series.labels.template.disabled = false

    // 使指示线颜色与对应饼块一致
    series.ticks.template.adapter.add("stroke", function (fill, target) {
      if (target.dataItem && target.dataItem.slice) {
        return target.dataItem.slice.fill
      }
      return fill
    })
    series.radius = am4core.percent(100)

    series.labels.template.html = `<div><span>{category}</span><span>({value})</span></div>`
  }

  useEffect(() => {
    if (!myChart.current) {
      createChart(chartRef, myChart, data.data)
    }
  }, [data.data])

  return (
    <div className="h-[184px] mt-[12px] rounded-6px] p-[8px] bg-[rgb(233,240,247)]">
      <div
        className="w-[365px] h-[32px] leading-[32px]"
        style={{
          backgroundImage: `url('assistant-decision/base-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        <span className="ml-[30px] text-white text-[14px] font-[600]">
          用工结构
        </span>
      </div>
      <div className="text-[12px] text-center">
        全口径用工{" "}
        <span className="text-[#63b2ee]">{dataDetails.totalText}</span>
      </div>
      <div ref={chartRef} className=" h-[136px] mt-4 ml-[20px]"></div>
    </div>
  )
}

export default EmploymentStructure
